<template>
  <div class="unit-management-container">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>计量单位管理</span>
          <div class="header-operations">
            <el-button type="primary" @click="handleCreate">新建单位</el-button>
            <el-button type="primary" @click="handleCreateConversion"
              >新建换算关系</el-button
            >
          </div>
        </div>
      </template>

      <el-tabs v-model="activeTab">
        <el-tab-pane label="单位列表" name="units">
          <el-form :inline="true" :model="queryForm" class="search-form">
            <el-form-item label="单位编码">
              <el-input v-model="queryForm.code" placeholder="请输入单位编码" />
            </el-form-item>
            <el-form-item label="单位名称">
              <el-input v-model="queryForm.name" placeholder="请输入单位名称" />
            </el-form-item>
            <el-form-item label="单位类型">
              <el-select
                v-model="queryForm.type"
                placeholder="请选择单位类型"
                clearable
              >
                <el-option label="重量单位" value="weight" />
                <el-option label="长度单位" value="length" />
                <el-option label="面积单位" value="area" />
                <el-option label="体积单位" value="volume" />
                <el-option label="计数单位" value="count" />
                <el-option label="其他单位" value="other" />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="handleSearch">查询</el-button>
              <el-button @click="handleReset">重置</el-button>
            </el-form-item>
          </el-form>

          <el-table :data="tableData" border style="width: 100%">
            <el-table-column prop="code" label="单位编码" width="120" />
            <el-table-column prop="name" label="单位名称" width="120" />
            <el-table-column prop="symbol" label="单位符号" width="100" />
            <el-table-column prop="type" label="单位类型" width="120">
              <template #default="scope">
                <el-tag>{{ getUnitTypeText(scope.row.type) }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="precision" label="精度" width="100" />
            <el-table-column
              prop="description"
              label="描述"
              min-width="200"
              show-overflow-tooltip
            />
            <el-table-column prop="status" label="状态" width="100">
              <template #default="scope">
                <el-tag
                  :type="scope.row.status === 'enabled' ? 'success' : 'info'"
                >
                  {{ scope.row.status === "enabled" ? "启用" : "停用" }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="200" fixed="right">
              <template #default="scope">
                <el-button link type="primary" @click="handleEdit(scope.row)"
                  >编辑</el-button
                >
                <el-button
                  link
                  :type="scope.row.status === 'enabled' ? 'danger' : 'success'"
                  @click="handleToggleStatus(scope.row)"
                  >{{
                    scope.row.status === "enabled" ? "停用" : "启用"
                  }}</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>

        <el-tab-pane label="换算关系" name="conversions">
          <el-form
            :inline="true"
            :model="conversionQueryForm"
            class="search-form"
          >
            <el-form-item label="源单位">
              <el-select
                v-model="conversionQueryForm.fromUnit"
                placeholder="请选择源单位"
                clearable
              >
                <el-option
                  v-for="unit in unitOptions"
                  :key="unit.value"
                  :label="unit.label"
                  :value="unit.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="目标单位">
              <el-select
                v-model="conversionQueryForm.toUnit"
                placeholder="请选择目标单位"
                clearable
              >
                <el-option
                  v-for="unit in unitOptions"
                  :key="unit.value"
                  :label="unit.label"
                  :value="unit.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="handleConversionSearch"
                >查询</el-button
              >
              <el-button @click="handleConversionReset">重置</el-button>
            </el-form-item>
          </el-form>

          <el-table :data="conversionTableData" border style="width: 100%">
            <el-table-column prop="fromUnit" label="源单位" width="120" />
            <el-table-column prop="toUnit" label="目标单位" width="120" />
            <el-table-column prop="rate" label="换算比率" width="120" />
            <el-table-column
              prop="formula"
              label="换算公式"
              min-width="200"
              show-overflow-tooltip
            />
            <el-table-column prop="status" label="状态" width="100">
              <template #default="scope">
                <el-tag
                  :type="scope.row.status === 'enabled' ? 'success' : 'info'"
                >
                  {{ scope.row.status === "enabled" ? "启用" : "停用" }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="200" fixed="right">
              <template #default="scope">
                <el-button
                  link
                  type="primary"
                  @click="handleEditConversion(scope.row)"
                  >编辑</el-button
                >
                <el-button
                  link
                  :type="scope.row.status === 'enabled' ? 'danger' : 'success'"
                  @click="handleToggleConversionStatus(scope.row)"
                  >{{
                    scope.row.status === "enabled" ? "停用" : "启用"
                  }}</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>

      <!-- 单位表单对话框 -->
      <el-dialog
        v-model="dialogVisible"
        :title="dialogType === 'create' ? '新建单位' : '编辑单位'"
        width="500px"
      >
        <el-form ref="formRef" :model="form" :rules="rules" label-width="100px">
          <el-form-item label="单位编码" prop="code">
            <el-input v-model="form.code" placeholder="请输入单位编码" />
          </el-form-item>
          <el-form-item label="单位名称" prop="name">
            <el-input v-model="form.name" placeholder="请输入单位名称" />
          </el-form-item>
          <el-form-item label="单位符号" prop="symbol">
            <el-input v-model="form.symbol" placeholder="请输入单位符号" />
          </el-form-item>
          <el-form-item label="单位类型" prop="type">
            <el-select v-model="form.type" placeholder="请选择单位类型">
              <el-option label="重量单位" value="weight" />
              <el-option label="长度单位" value="length" />
              <el-option label="面积单位" value="area" />
              <el-option label="体积单位" value="volume" />
              <el-option label="计数单位" value="count" />
              <el-option label="其他单位" value="other" />
            </el-select>
          </el-form-item>
          <el-form-item label="精度" prop="precision">
            <el-input-number
              v-model="form.precision"
              :min="0"
              :max="6"
              placeholder="请输入精度"
            />
          </el-form-item>
          <el-form-item label="描述" prop="description">
            <el-input
              v-model="form.description"
              type="textarea"
              :rows="3"
              placeholder="请输入描述"
            />
          </el-form-item>
        </el-form>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="dialogVisible = false">取消</el-button>
            <el-button type="primary" @click="handleSubmit">确定</el-button>
          </div>
        </template>
      </el-dialog>

      <!-- 换算关系表单对话框 -->
      <el-dialog
        v-model="conversionDialogVisible"
        :title="
          conversionDialogType === 'create' ? '新建换算关系' : '编辑换算关系'
        "
        width="500px"
      >
        <el-form
          ref="conversionFormRef"
          :model="conversionForm"
          :rules="conversionRules"
          label-width="100px"
        >
          <el-form-item label="源单位" prop="fromUnit">
            <el-select
              v-model="conversionForm.fromUnit"
              placeholder="请选择源单位"
            >
              <el-option
                v-for="unit in unitOptions"
                :key="unit.value"
                :label="unit.label"
                :value="unit.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="目标单位" prop="toUnit">
            <el-select
              v-model="conversionForm.toUnit"
              placeholder="请选择目标单位"
            >
              <el-option
                v-for="unit in unitOptions"
                :key="unit.value"
                :label="unit.label"
                :value="unit.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="换算比率" prop="rate">
            <el-input-number
              v-model="conversionForm.rate"
              :precision="6"
              :step="0.000001"
              placeholder="请输入换算比率"
            />
          </el-form-item>
          <el-form-item label="换算公式" prop="formula">
            <el-input
              v-model="conversionForm.formula"
              placeholder="请输入换算公式"
            />
          </el-form-item>
        </el-form>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="conversionDialogVisible = false">取消</el-button>
            <el-button type="primary" @click="handleConversionSubmit"
              >确定</el-button
            >
          </div>
        </template>
      </el-dialog>
    </el-card>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";

// ... 省略状态定义和方法实现 ...

// 获取单位类型文本
const getUnitTypeText = (type) => {
  const map = {
    weight: "重量单位",
    length: "长度单位",
    area: "面积单位",
    volume: "体积单位",
    count: "计数单位",
    other: "其他单位",
  };
  return map[type] || type;
};

// 分页方法
const handleSizeChange = (val) => {
  pageSize.value = val;
  handleSearch();
};

const handleCurrentChange = (val) => {
  currentPage.value = val;
  handleSearch();
};
</script>

<style scoped>
.unit-management-container {
  padding: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-operations {
  display: flex;
  gap: 10px;
}

.search-form {
  margin-bottom: 20px;
}

.pagination {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}

.dialog-footer {
  text-align: right;
}
</style>
